import React, {useState} from "react";
import {Button, Modal} from "antd";
import {useRequest} from "ahooks";


import {findMyParentList} from "@/services/ant-design-pro/users";


import {shenhePayment} from "@/services/ant-design-pro/order";
import {ProFormList, ProFormMoney,ProFormText,ProForm} from "@ant-design/pro-form";

interface Props {
  id?: number | undefined,
  row?: API.LoginLog | undefined,
  onSuccess: (event: boolean) => void;
}


const OrderShenhe: React.FC<Props> = (props) => {
  const {id, row, onSuccess} = props;
  const [isModalOpen, setIsModalOpen] = useState ( false );

  const showModal = () => {
    // @ts-ignore
    fetchByUsersDetailList ( row?.userId )

  };

  const handleOpen = () => {
    setIsModalOpen ( true );
  };

  const {
    run: fetchByUsersDetailList,
    data: dataList,
  } = useRequest ( findMyParentList, {
    debounceWait: 100,
    manual: true,
    onSuccess: function () {
      handleOpen ();
    }
  } );

  return (<>
    <Button onClick={showModal}>手动</Button>
    <Modal footer={false}  width={500} title={row?.userName} visible={isModalOpen}  onCancel={()=>setIsModalOpen(false)} >
    <ProForm<API.SelectItemOrderParams>

      initialValues={{
        users:dataList
      }}
      onFinish={((formData) => {
      let users = formData?.users;
      console.log ( formData )
      return new Promise ( (resolve, reject) => {
        shenhePayment ( id, users ).then ( res => {
          console.log ( res );
          if (res.success) {
            onSuccess ( res.success )
            resolve ( true )
          } else {
            reject ( false )
          }
        } ).catch ( () => {
          reject ( false )
        } )
      } )

    })}>
      <ProFormList
      name="users"

creatorButtonProps={false}
      itemContainerRender={(doms) => {
      return <ProForm.Group>{doms}</ProForm.Group>;
    }}
      >

    {(f, index, action) => {


      return (<>
      <div style={{width: "150px"}}><ProFormText name={"name"} readonly={true}/></div>
      <ProFormMoney name={"price"}/></>)
    }}
      </ProFormList>

      </ProForm>
    </Modal>
      </>)
    }

export default OrderShenhe;


